<template>
  <div class="home">
    <calendar  @tabCalendar='tabCalendar' @input='getSelectDate' :data-lsit="calendarList" />
    <div>
      <button @click="multiSelect">签到调用</button>
      &nbsp;
      <button @click="singleSelect">选择时间段</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import calendar from "@/components/calendar.vue";

export default {
  name: "home",
  data:function(){
    return{
      calendarList:{
        id:2,                                                           //1 选择时间段  2 签到调用日历
        source:'',                                                      //当前页面名字，扩展使用不是必填字段
        markList:['2019/11/10','2019/11/9','2019/11/10','2019/11/8'],   //日历签到天数列表 参数格式['2019/11/11','2019/11/10','2019/11/9','2019/11/8']
      },
    }
  },
  methods:{
    //切换月份和年份调用
    tabCalendar:function(time){
       console.log(time)
    },
    //获取区间或者当前点击的时间戳
    getSelectDate:function(res){
      console.log(res)
    },
    singleSelect:function(){
      this.$set(this.calendarList,'id',1)
    },
    multiSelect:function(){
      this.$set(this.calendarList,'id',2)
    }
  },
  components: {
    calendar
  }
};
</script>
